<template>
    <view class="data-card" :class="theme">
        <view class="card-header">
            <text class="title">{{ title }}</text>
        </view>
        <view py-4>
            <view center>{{publishedTotal}}%</view>
            <mprogress :percentage="publishedTotal"></mprogress>
        </view>
        <view class="stats-row">
            <view class="stat-item">
            <text class="value">{{data.count}}</text>
            <text class="label">总数</text>
            </view>
            <view class="stat-item">
            <text class="value">{{data.complete}}</text>
            <text class="label">已完成</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
    import { ref, defineProps, computed } from 'vue'
    interface StatisticData{
        count:number,
        complete:number
    }
    const prop = defineProps<{
        data: StatisticData,
        theme:string,
        title:string
    }>()
    const publishedTotal = computed(() => {
        if(prop.data.count>0){
            return Math.round(prop.data.complete/prop.data.count*100)
        }else{
            return 100
        }
    })
</script>
<style lang="css" scoped>

.data-card {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

/* 颜色主题 */
.blue-theme { border-left: 8rpx solid #1890ff; }
.green-theme { border-left: 8rpx solid #52c41a; }
.purple-theme { border-left: 8rpx solid #722ed1; }

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 20rpx;
}

.value {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}

.label {
  font-size: 20rpx;
  color: #666;
  display: block;
}

.stats-row {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
  flex: 1;
}

</style>